<template>
  <div id="bigDiv">
    <head-2 />
    <div id="bigTitle">一亿以内的大小写认识</div>
    <beginView
      :textInfo="this.textInfo"
      @isOpen="getOpen"
      v-if="this.isOpend==1"
    />
    <div id="countDown">
      倒计时<span id="timeNumber">{{ countDwon }}</span>s
    </div>
    <div id="contentDiv">
      <div class="contenTittle">读作：</div>
      <div class="number1"> {{ readNumber }}</div>
      <div class="contenTittle">写作：</div>
     <input type="text" name="" class="number2" placeholder="请输入写作答案：" id="inputAnser">
    </div>
    <div @click="ispass" id="tijiao">提交</div>
    <GetScore :userScore="this.userScore" v-if="this.isOpend==4" @onceTime="getOpenOnce"/>
  </div>
</template>
  
<script>
import head2 from "@/components/Head/head2.vue";
import BeginView from '@/components/beginView/beginView.vue';
import GetScore from '@/components/getScore/getScore.vue';
export default {
  components: { head2,BeginView, GetScore },
  data() {
    return {
      whiteNumber:0,
      readNumber:"",
      countDwon: 20,
      isOpend: 1,
      isEnd: false,
      textInfo: {
        val: "游戏开始了，加油小朋友",
        textTitlle: "比一比的玩法介绍",
        textContant:
          "小朋友，每次游戏你都有10秒钟的时间进行游戏，加油！！",
      },
      userScore: {
        score: 0,
        allCount: 14,
        rightCount: 0,
        falseCount: 0,
        rightRate: 0,
        echartId:"compareCount"+new Date()
      },
    };
  },
  mounted() {
    //   this.contDwon()
  this.getQusetion()
  },
  watch:{
    isOpend(){
      this.contDwon()
    }
  },
  methods: {
     computedRes(){
      this.countDwon=1
      this.isOpend=4
      this.isEnd = !this.isEnd;
    },
    getRes(){
      this.isOpend=4
    },
    getOpen(val) {
      this.isOpend = val;
    },
    getOpenOnce(val){
      this.isOpend = val;
      this.countDwon=10
      this.userScore.allCount=0
      this.userScore.rightCount=0
      this.userScore.falseCount=0
      this.userScore.rightRate=0
    },
    tijao(){
      this.getQusetion()
    },
    contDwon() {
      const timer = setInterval(() => {
        this.countDwon--;
        if (this.countDwon <= 0) {
          // this.userScore.rightRate=this.userScore.rightCount/this.userScore.allCount
          clearInterval(timer);
          this.isOpend=4
          this.isEnd = !this.isEnd;
          // this.isEnd = !this.isEnd;
        }
      }, 1000);
    },
    toChineseBig(num) {
      // 将接收到的num转换为字符串
      var strNum = String(num)
      // 定义单位
      // var unit = ['拾', '佰', '仟', '万', '拾', '佰', '仟', '亿', '拾', '佰', '仟']
      var unit = ['十', '百', '千', '万', '十', '百', '千', '亿', '十', '百', '千']
      // 结果中放一个符号，用来解决最后的零去不掉的问题
      var result = ['@']
      // 单位下标
      var unitNo = 0
      // 从后往前遍历接收到的数据，省略结束条件
      for (let i = strNum.length - 1;; i--) {
        // 调用转大写函数，将每一个数字转换成中文大写，一次放入一个到结果数组中
        result.unshift(numToChinese(strNum[i]))
        // 如果不大于0
        if (i <= 0) {
          // 结束循环
          break
        }
        // 放入一个数字，放入一个单位
        result.unshift(unit[unitNo])
        // 单位下标加1
        unitNo++
      }
      // 将结果数组转换成字符串，并使用正则替换一些关键位置，让结果符合语法
      // return result.join('').replace(/(零[仟佰拾]){1,3}/g, '零').replace(/零{2,}/g, '零').replace(/零([万亿])/g, '$1').replace(/亿万/g, '亿').replace(/零*@/g, '')
      return result.join('').replace(/(零[千百十]){1,3}/g, '零').replace(/零{2,}/g, '零').replace(/零([万亿])/g, '$1').replace(/亿万/g, '亿').replace(/零*@/g, '')
      function numToChinese(n) {
        // var chineseBigNum = '零壹贰叁肆伍陆柒捌玖'
        var chineseBigNum = '零一二三四五六七八九'
        return chineseBigNum[n]
      }
    },
    getQusetion(){
     this.number=Math.floor(Math.random()*100000000)+1
     console.log(this.number)
     this.readNumber=this.toChineseBig(this.number)
    },
    ispass(){
      const useAnser=document.getElementById("inputAnser")
      if(useAnser.value==this.number){
        this.userScore.rightCount++
      }
      else{
        this.userScore.falseCount++
      }
      this.userScore.allCount=this.userScore.rightCount+this.userScore.falseCount
      this.userScore.rightRate=this.userScore.rightCount/this.userScore.allCount
      this.getQusetion()
    }
  }
};
</script>
  
<style lang="less" scoped>
#bigDiv {
  height: 100vh;

  #countDown {
    font-size: 18px;
    font-weight: bold;
    margin-top: 30px;
    letter-spacing: 2px;
    #timeNumber {
      color: red;
    }
  }

  #bigTitle {
    font-weight: bold;
    font-size: 22px;
    margin-top: 20px;
    letter-spacing: 3px;
  }

  #contentDiv {
  height: 40vh;
  width: 100vw;
  margin:10vh auto;
  text-align: left;
  font-size: 18px;
  .contenTittle{
    font-size: 20px;
    font-weight: bold;
  }
  .number1{
    // background-color: aquamarine;
    height: 5vh;
    line-height: 5vh;
    text-indent: 20px;
  }
  .number2{
    background-color: rgb(205, 234, 234);
    width: 75vw;
    margin-left: 8vw;
    height: 5vh;
    line-height: 5vh;
    text-indent: 10px;
    border: none;
  }
 
  div{
    margin: 5vw;
  }
  }
  #tijiao{
    font-weight: bold;
    font-size: 20px;
    background-color: rgb(233, 130, 130);
    width: 20vw;
    margin: -17vh auto;
    border-radius: 5px;
  }
}
</style>